<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>党政机关公文生成系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
<style type="text/css">
body {
    font-family: "Microsoft YaHei", sans-serif;
}

.font-fangsong {
    font-family: "仿宋", "FangSong", serif;
}

.nav-tabs .nav-link {
    font-weight: bold;
}

.tab-content {
    min-height: 500px;
    background-color: #f8f9fa;
}

textarea {
    font-size: 14px;
    line-height: 1.6;
}
</style>
</head>
<body>
    <div class="container mt-4">
        <h1 class="text-center mb-4">党政机关公文生成系统</h1>
        
        <ul class="nav nav-tabs" id="docTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="header-tab" data-bs-toggle="tab" data-bs-target="#header" type="button">版头信息</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="content-tab" data-bs-toggle="tab" data-bs-target="#content" type="button">正文内容</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="footer-tab" data-bs-toggle="tab" data-bs-target="#footer" type="button">版记信息</button>
            </li>
        </ul>
        
        <div class="tab-content p-3 border border-top-0 rounded-bottom">
            <!-- 版头信息 -->
            <div class="tab-pane fade show active" id="header" role="tabpanel">
                <div class="row mb-3">
                    <div class="col-md-4">
                        <label class="form-label">份号(可选):</label>
                        <input type="text" class="form-control" id="documentNumber" placeholder="000001">
                        <small class="text-muted">6位阿拉伯数字</small>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">密级(可选):</label>
                        <select class="form-select" id="secretLevel">
                            <option value="">无</option>
                            <option value="绝密">绝密</option>
                            <option value="机密">机密</option>
                            <option value="秘密">秘密</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">保密期限:</label>
                        <input type="text" class="form-control" id="secretPeriod" placeholder="如'1年'">
                    </div>
                </div>
                
                <div class="row mb-3">
                    <div class="col-md-4">
                        <label class="form-label">紧急程度(可选):</label>
                        <select class="form-select" id="urgencyLevel">
                            <option value="">无</option>
                            <option value="特急">特急</option>
                            <option value="加急">加急</option>
                            <option value="平急">平急</option>
                        </select>
                    </div>
                    <div class="col-md-8">
                        <label class="form-label">发文机关标志:</label>
                        <input type="text" class="form-control" id="issuingAuthority" value="XX市XX局文件">
                    </div>
                </div>
                
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="form-label">发文字号:</label>
                        <input type="text" class="form-control" id="documentCode" value="XX发〔2023〕1号">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">行文方向:</label>
                        <select class="form-select" id="docDirection" onchange="toggleIssuerField()">
                            <option value="false">下行文/平行文</option>
                            <option value="true">上行文</option>
                        </select>
                    </div>
                    <div class="col-md-3" id="issuerField" style="display: none;">
                        <label class="form-label">签发人:</label>
                        <input type="text" class="form-control" id="issuerName">
                    </div>
                </div>
                
                <div class="row mb-3">
                    <div class="col-12">
                        <label class="form-label">公文标题:</label>
                        <input type="text" class="form-control" id="title" value="关于XXXX工作的报告">
                    </div>
                </div>
            </div>
            
            <!-- 正文内容 -->
            <div class="tab-pane fade" id="content" role="tabpanel">
                <div class="mb-3">
                    <div class="btn-toolbar mb-2">
                        <div class="btn-group me-2">
                            <button type="button" class="btn btn-outline-secondary" onclick="insertTitle('一、')">一级标题</button>
                            <button type="button" class="btn btn-outline-secondary" onclick="insertTitle('（一）')">二级标题</button>
                            <button type="button" class="btn btn-outline-secondary" onclick="insertTitle('1.')">三级标题</button>
                            <button type="button" class="btn btn-outline-secondary" onclick="insertTitle('（1）')">四级标题</button>
                        </div>
                    </div>
                    <textarea class="form-control font-fangsong" id="contentText" rows="15" style="font-size: 14px;">区政府：

根据《党政机关公文格式》（GB/T 9704-2012）要求，现就有关事项报告如下：

一、基本情况
（一）项目背景
1. 项目概况
（1）项目名称：XXX项目

二、存在问题

三、工作建议

请批示。</textarea>
                </div>
                
                <div class="row mb-3">
                    <div class="col-12">
                        <label class="form-label">附件说明(可选):</label>
                        <textarea class="form-control" id="attachments" rows="3">1. 实施方案.docx
2. 预算表.xlsx</textarea>
                    </div>
                </div>
            </div>
            
            <!-- 版记信息 -->
            <div class="tab-pane fade" id="footer" role="tabpanel">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="form-label">成文日期:</label>
                        <input type="text" class="form-control" id="issueDate">
                    </div>
                </div>
                
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="form-label">联系人(可选):</label>
                        <input type="text" class="form-control" id="contact">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">电话(可选):</label>
                        <input type="text" class="form-control" id="phone">
                    </div>
                </div>
                
                <div class="row mb-3">
                    <div class="col-12">
                        <label class="form-label">抄送机关(可选):</label>
                        <textarea class="form-control" id="copyTo" rows="3">XX局, XX办公室, XX处</textarea>
                    </div>
                </div>
                
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="form-label">印发机关:</label>
                        <input type="text" class="form-control" id="printOffice" value="XX局办公室">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">印发日期:</label>
                        <input type="text" class="form-control" id="printDate">
                    </div>
                </div>
            </div>
        </div>
        
        <div class="d-flex justify-content-end mt-3">
            <button class="btn btn-primary" onclick="generateDocument()">生成公文</button>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
// 初始化日期
document.addEventListener('DOMContentLoaded', function() {
    const today = new Date();
    const dateStr = today.getFullYear() + '年' + 
                   (today.getMonth() + 1).toString().padStart(2, '0') + '月' + 
                   today.getDate().toString().padStart(2, '0') + '日';
    
    document.getElementById('issueDate').value = dateStr;
    document.getElementById('printDate').value = dateStr;
});

function toggleIssuerField() {
    const isUpward = document.getElementById('docDirection').value === 'true';
    document.getElementById('issuerField').style.display = isUpward ? 'block' : 'none';
}

function insertTitle(prefix) {
    const textarea = document.getElementById('contentText');
    const startPos = textarea.selectionStart;
    const endPos = textarea.selectionEnd;
    const text = textarea.value;
    
    textarea.value = text.substring(0, startPos) + prefix + text.substring(endPos);
    textarea.focus();
    textarea.setSelectionRange(startPos + prefix.length, startPos + prefix.length);
}

async function generateDocument() {
    const request = {
        documentNumber: document.getElementById('documentNumber').value,
        secretLevel: document.getElementById('secretLevel').value,
        secretPeriod: document.getElementById('secretPeriod').value,
        urgencyLevel: document.getElementById('urgencyLevel').value,
        issuingAuthority: document.getElementById('issuingAuthority').value,
        documentCode: document.getElementById('documentCode').value,
        isUpward: document.getElementById('docDirection').value === 'true',
        issuerName: document.getElementById('issuerName').value,
        title: document.getElementById('title').value,
        content: document.getElementById('contentText').value,
        attachments: document.getElementById('attachments').value,
        issueDate: document.getElementById('issueDate').value,
        contact: document.getElementById('contact').value,
        phone: document.getElementById('phone').value,
        copyTo: document.getElementById('copyTo').value,
        printOffice: document.getElementById('printOffice').value,
        printDate: document.getElementById('printDate').value
    };

    try {
        const response = await fetch('/api/document/generate', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(request)
        });
        
        if (!response.ok) {
            const error = await response.text();
            throw new Error(error || '生成失败');
        }
        
        const blob = await response.blob();
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = '公文.docx';
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
        a.remove();
    } catch (error) {
        alert('生成公文时出错: ' + error.message);
        console.error('Error:', error);
    }
}
</script>
</body>
</html>